<template>
    <div>
        <Card class='card-border'>
            <Row>
                <Col span='12'>
                    <div>
                        <div style='width:3px;height:15px;background:#06A0FD;border-radius:2px;margin-right:8px;margin-top: 6px;float: left'></div>
                        <span style='font-size: 18px;color:#464C5B'>剩余短信</span>
                    </div>
                    <p style='font-size: 36px;color:#333;margin-top:10px'>{{laveMoney}}<span style="font-size: 18px;"> 条</span></p>
                </Col>
                <Col span='12' style='text-align: right'>
                    <button class='btn-charge btn-hover' @click="buySms">购买</button>
                </Col>
            </Row>
        </Card>
        <div style='background: #fff'>
    		<div class='content-title'>短信日志</div>
    		<div style='padding:35px 20px'>
    			<!-- <button class='btn' @click='addImage' style='width:120px'>创建短信验证码</button> -->
    			<div style="padding:1px">
    				<Table :columns="imageList" :data="imageData" stripe></Table>
    			</div>
    	    	<div style='overflow: hidden'>
    	    		<Page :total="pagination.rowCount" :page-size='pagination.pageSize' style='float: right;margin: 20px 0;' @on-change='changePage'></Page>
    	    	</div>
    		</div>
            <!-- 创建任务 -->
           <!--  <Modal v-model="modal" width="600">
                <p slot="header">
                    <span>创建短信验证码</span>
                </p>
                <div>
                     <Form :label-width='90' label-position='left'>
                     	<FormItem label='模板名称'>
                            <p slot='label'><span class='star'>*</span>模板名称</p>
                            <Input v-model='formItem.name' placeholder='请输入模板名称'></Input>
                        </FormItem>
                        <FormItem label='模板内容'>
                            <p slot='label'><span class='star'>*</span>模板内容</p>
                            <Input type='textarea' :rows='5' v-model='formItem.content' placeholder='请输入模板内容'></Input>
                        </FormItem>
                    </Form>
                </div>
                <div slot="footer">
                    <button class='btn-cancel' @click="cancel">取消</button>
                    <button v-if="!is_click" class='btn-sure' @click="sure">确认</button>
                    <button v-if="is_click" class='btn-sure' @click="sure">确认</button>
                </div>
            </Modal> -->
            <!-- 充值 -->
            <Modal v-model="charge.modal" width="600">
                <p slot="header">
                    <span>短信充值</span>
                </p>
                <div style='margin-bottom: 8px'>
                    <div v-for="(item,index) in smsFee" class='sms' @click="selectBuy(item,index)">
                        <div :class="{'selected' : select_index == index}" class='sms-wrap'>
                            <div style='width: 100%'>
                                <p style='font-size:18px;color:#464C5B'>{{item.number}} 条</p>
                                <p style="font-size: 13px;color: #657180;margin-top: 8px">售价：{{item.price}} 元</p>
                            </div>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div slot="footer">
                    <button class='btn-cancel' @click="chargeCancel">取消</button>
                    <button class='btn-sure' @click="chargeSure">确认</button>
                </div>
            </Modal>
    	</div>
    </div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				modal:false,
                laveMoney:0,
				imageList: [
                    // {
                    //     title: '模板名称',
                    //     key: 'name'
                    // },
                    // {
                    //     title: '模板内容',
                    //     key: 'content'
                    // },
                    // {
                    //     title: '操作',
                    //     key: 'action',
                    //     render: (h, params) => {
                    //         return h('div', [
                    //             h('span', {
                    //                 style: {
                    //                     color:'#06A0FD',
                    //                     cursor:'pointer',
                    //                     marginRight:'8px'
                    //                 },
                    //                 on: {
                    //                     click: () => {
                    //                         this.edit(params.row)
                    //                     }
                    //                 }
                    //             }, '编辑'),
                    //             h('span', {
                    //                 style: {
                    //                     color:'#06A0FD',
                    //                     cursor:'pointer'
                    //                 },
                    //                 on: {
                    //                     click: () => {
                    //                         this.del(params.row)
                    //                     }
                    //                 }
                    //             }, '删除')
                    //         ]);
                    //     }
                    // }
                    {
                        title: '手机号',
                        key: 'phone'
                    },
                    {
                        title: '内容',
                        key: 'content'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render:(h,params)=>{
                            let styleObj = {
                                    padding:'5px',
                                    borderRadius:'6px'
                                }
                            if(params.row.status==0){
                                styleObj.background = '#eee';
                            }else{
                                styleObj.background = '#09D89E';
                                styleObj.color = '#fff';
                            }
                            return h('span',{
                                        style:styleObj
                                    },params.row.status==0?'失败':'成功')
                        }
                    },
                ],
                imageData: [],
                pagination:{},
                currentPage:1,
                formItem:{
                	name:'',
                	content:''
                },
                charge:{
                    modal:false,
                    payway:1
                },
                select_id:0,
                select_index:0,
                smsFee:[],
                is_click:false,     // 修复连点确定bug
                editId:0
			}
		},
        created(){
            // this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            this.getData();
            this.getLog();
        },
		methods:{
             getData(){
                this.fetch('/home/app/plugins/smscode/page/'+this.currentPage).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.laveMoney = res.data.data.number;
                        // this.imageData = res.data.data.data;
                        // this.pagination = res.data.data.pagination;
                    }
                })
            },
            getLog(){
                this.fetch('/home/app/plugins/smscode/log?page='+this.currentPage).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.imageData = res.data.data.data;
                        this.pagination = res.data.data.pagination;
                    }
                })
            },
            changePage(page){
                this.currentPage = page;
                this.getData();
            },
			// addImage(){
   //              this.editId = 0;
			// 	this.modal = true;
   //              this.formItem = {
   //                  name:'',
   //                  content:''
   //              }
			// },
			// cancel(){
   //              this.modal = false;
			// },
			// sure(){
   //              if(!this.formItem.name){
   //                  this.$Message.warning('请填写模板名称')
   //                  return
   //              }

   //              if(!this.formItem.content){
   //                  this.$Message.warning('请填写模板内容')
   //                  return
   //              }
   //              let data = {
   //                  name:this.formItem.name,
   //                  content:this.formItem.content,
   //              }
   //              if(this.editId){
   //                  data.id = this.editId
   //              }
   //              this.fetch('/home/app/plugins/smscode/add',data).then(res=>{
   //                  this.is_click = true;
   //                  if(res&&res.data.data&&res.data.code){
   //                      this.getData()
   //                      this.modal = false;
   //                  }
   //              })
			// },
            buySms(){
                this.charge.modal = true;
                this.select_index = 0;
                this.fetch('/home/app/plugins/smscode/smsFee').then(res => {
                    if(res && res.data.code && res.data.data){
                        this.smsFee = res.data.data;
                        if(this.smsFee.length){
                            this.select_id = this.smsFee[0].id;
                        }
                    }
                })
            },
            selectBuy(item,index){
                this.select_id = item.id;
                this.select_index = index;
            },
            chargeCancel(){
                this.charge.modal = false;
            },
            chargeSure(){
                this.fetch('/home/app/plugins/smscode/Recharge',{id:this.select_id}).then(res => {
                    if(res && res.data.code && res.data.data){
                        this.$Message.success(res.data.data);
                        this.charge.modal = false;
                        this.getData();
                    }
                })
            },
            // edit(row){
            //     this.fetch('/home/app/plugins/smscode/id/'+row.id).then(res=>{
            //         if(res&&res.data.code){
            //             this.modal = true;
            //             let data = res.data.data;
            //             this.formItem.name = data.name;
            //             this.formItem.content = data.content;
            //             this.editId = data.id;
            //         }
            //     })
            // },
            // del(row){
            //     this.$Modal.confirm({
            //         title: '提示',
            //         content: '<p>确定删除吗</p>',
            //         onOk: () => {
            //             this.fetch('/home/app/plugins/smscode/del/'+row.id).then(res=>{
            //                 if(res&&res.data.data&&res.data.code){
            //                     this.$Message.success('删除成功')
            //                     this.getData();
            //                 }
            //             })
            //         }
            //     });
            // }
		}
	}
</script>
<style type="text/css" scoped>
    .btn-charge{
        width:100px;
        height:32px;
        line-height: 32px;
        background: #06A0FD;
        color:#fff;
        border-radius: 16px;
        margin-top: 25px;
        font-size: 14px;
    }
    .btn-charge:hover{
        background: rgba(26,160,253,0.9); 
    }
    .pay-border{
        width:100px;
        height:40px;
        border:1px solid #d7dde4;
        float:left;
        cursor:pointer;
        text-align: center
    }
    .bordered{
        border:1px solid #06A0FD;
    }
    .pay-border img{
        width:100%;height:100%;
    }
    .card-border{
        height:150px;
        padding:15px 40px;
        background: #fff;
        margin-bottom: 24px
    }
    .sms{
        cursor: pointer;
        float:left;
        margin-right: 16px;
        margin-bottom: 16px;
        line-height: 1;
    }
    .sms:nth-child(4n){
         margin-right: 0;
    }
    .sms-wrap{
        width:118px;
        height:72px;
        border:1px solid #D7DDE4;
        border-radius: 4px;
        text-align: center; 
        display: flex;
        align-items: center;
    }
    .selected{
        border: 1px solid #06A0FD !important;
    }
</style>
